<template>
	<div class="step-3">
		<el-button size="small" type="primary" @click="savePageAndNext" class="next">下一步</el-button>
		<div class="left">
			<div class="group_simple item animate" v-if="allList.length > 0" v-for="(item,index) in allList">
				<p>
					{{item.name}}
					<i @click="removeAllListItem(index)" class="group_title_icon el-icon-delete"></i>
				</p>
				<p>
					共<span>{{item.list.length}}</span>题
					<i @click="allPrev(index)" class="group_title_icon el-icon-arrow-up"></i>
				</p>
				<p>
					每题<el-input
					    size="mini"
					    placeholder=""
					    style="width: 70px;margin: 0 5px;"
					    v-model="item.score"
					    @blur="getAlldata(1)"
					    >
					  </el-input>分
					<i @click="allNext(index)" class="group_title_icon el-icon-arrow-down" ></i>
				</p>
			</div>
			<div class="total"  style="margin-bottom: 10px;">
				<p>总题数：<span>{{allTopicCount}}</span>题</p>
				<p>当前总分数：<span>{{allTopicValue}}</span>分</p>
			</div>
			<div>
				<span style="color: red;">注：每次编辑请注意检查分值</span>
			</div>
		</div>		
		<div class="right">
			<div class="questions-board">
				<h3>
					<input placeholder="请输入标题" v-model="pageName" clearable></input>
				</h3>
				<div v-if="allList.length > 0" v-for="( item,index ) in allList">
					<div class="questions-group group_title">
						<div class="title">
							<!--<el-input
						    size="mini"
						    placeholder=""
						    style="width: 300px;margin: 0 5px;color: #999999;"
						    v-model="item.name">
						  </el-input>-->
						  <span style="">每题：<el-input
						    size="mini"
						    placeholder=""
						    style="width: 70px;margin: 0 5px;color: #999999;"
						    v-model="item.score"
						    @blur="getAlldata(1)"
						    >
						  </el-input>分</span>
						</div>
						<div class="extract-box-tit">
							<span class="questionTypeText">{{item.describ}}</span>
							<div class="extract-box-btnDiv">
								<el-button @click.native="checkItemTest(item,index)" type="primary" plain>选择试题</el-button>
							</div>
						</div>
					</div>
					<div class="group_questionShow" v-for="(list,listidx) in item.list">
						<div class="questions question_single_choice">
							<div class="choice_list" v-if="item.type=='single_choice'">
								<dl>
									<dt>
										<p><b>题目：<span style="display: inline-block;" v-html="list.title"></span></b></p>
										<p><br></p>
									</dt>
									<dd :class="[list.answer[0]==opidx ? 'correctAnswer':'']"  v-for="(options,opidx) in JSON.parse(list.content)"><strong class="icon icon-a_circle_a_outline">{{question[opidx]}}.</strong><span style="display: inline-block;" v-html="options"></span></dd>
									<!--<dd class="b correctAnswer"><strong class="icon icon-a_circle_b">B.</strong>11111111111111111</dd>
									<dd class="c"><strong class="icon icon-a_circle_c_outline">C.</strong>111111111111111111111111111</dd>
									<dd class="d"><strong class="icon icon-a_circle_d_outline">D.</strong>1111111111111111111111111111111</dd>-->
								</dl>
								<p class="answer">答案：{{question[list.answer[0]]}} </p>			
								<div class="analysis">解析：<span style="display: inline-block;" v-html="list.analysis"></span></div>
							</div>
							<div class="choice_list" v-if="item.type=='multi_choice' && list.content!=''">
								<dl>
									<dt>
										<p><b>题目：<span style="display: inline-block;" v-html="list.title"></span></b></p>
										<p><br></p>
									</dt>
									<dd :class="[list.answer[opidx]== 'true' ? 'correctAnswer':'']"  v-for="(options,opidx) in JSON.parse(list.content)"><strong class="icon icon-a_circle_a_outline">{{question[opidx]}}.</strong><span style="display: inline-block;" v-html="options"></span></dd>
									<!--<dd class="b correctAnswer"><strong class="icon icon-a_circle_b">B.</strong>11111111111111111</dd>
									<dd class="c"><strong class="icon icon-a_circle_c_outline">C.</strong>111111111111111111111111111</dd>
									<dd class="d"><strong class="icon icon-a_circle_d_outline">D.</strong>1111111111111111111111111111111</dd>-->
								</dl>
								<p class="answer">答案：<span>{{list.answer | getMultiChoiceAnswer}}</span> </p>			
								<div class="analysis">解析：<span style="display: inline-block;" v-html="list.analysis"></span></div>
							</div>
							<div class="choice_list" v-if="item.type=='check'">
								<dl>
									<dt>
										<p><b style="display: inline-block;" v-html="list.title"></b></p>
										<p><br></p>
									</dt>
									<!--<dd class="[list.answer[0]==='正确' ? 'correctAnswer':'']"><span style="display: inline-block;" v-html="list.title"></span></dd>-->
									<!--<dd class="b "><strong class="el-icon-close"></strong>11111111111111111</dd>-->
								</dl>
								<p class="answer">答案：<strong class="el-icon-close" v-if="list.answer[0]==='错误'"></strong><strong v-if="list.answer[0]==='正确'" class="el-icon-check"></strong>{{list.answer[0]}}</p>			
								<div class="analysis">解析：<span style="display: inline-block;" v-html="list.analysis"></span></div>
							</div>
							<div class="choice_list" v-if="item.type=='fill'">
								<dl>
									<dt>
										<p><b style="display: inline-block;" v-html="list.title"></b></p>
										<p><br></p>
									</dt>
								</dl>
								<p class="answer">答案：{{list.answer[0]}}</p>			
								<div class="analysis">解析：<span style="display: inline-block;" v-html="list.analysis"></span></div>
							</div>
							<div class="choice_list" v-if="item.type=='brief' || item.type=='audio'">
								<dl>
									<dt>
										<p><b style="display: inline-block;" v-html="list.title"></b></p>
										<p><br></p>
									</dt>
								</dl>
								<p class="answer">答案：{{list.answer[0] || '无答案'}}</p>			
								<div class="analysis">解析：<span style="display: inline-block;" v-html="list.analysis"></span></div>
							</div>
							<div class="edition_in">
								<p>
									<el-input
									    size="mini"
									    placeholder=""
									    style="width: 70px;margin: 0 5px;color: #999999;"
									    v-model="list.full_score"
									    @blur="getAlldata"
									    >
									 </el-input>分
								</p>
								<!--<p><el-button type="primary" icon="el-icon-edit" size="small" plain>编辑</el-button></p>-->
								<p><el-button type="primary" @click="deleteListItem(index,listidx)" icon="el-icon-delete" size="small" plain>删除</el-button></p>
								<p><el-button type="primary" @click="listprev(index,listidx)" icon="el-icon-arrow-up" size="small" plain>上移</el-button></p>
								<p><el-button type="primary" @click="listnext(index,listidx)" icon="el-icon-arrow-down" size="small" plain>下移</el-button></p>
							</div>
						</div>
					</div>
				</div>
				<div class="empty" v-if="allList.length <= 0">当前试卷还是空空如也，点击下方添加新题型！</div>
				<div :class="['ipt_questions_box',allList.length <= 0?'buttonLeft':'',]">
					 <!--试题类型-->
					<el-dropdown trigger="click"  @command = "questionTypeCheck" style="z-index: 1;">
					  <el-button plain >
					    添加试题<i class="el-icon-arrow-down el-icon--right"></i>
					  </el-button>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item v-for="item in questionType" :command="JSON.stringify(item)">{{item.describ}}</el-dropdown-item>
					  </el-dropdown-menu>
					</el-dropdown>
				</div>
				<!--<div style="margin-top: 20px;margin-bottom: 20px;">
					考试时间：<el-input v-model="testTime" style="width:200px;" size="mini" placeholder="请输入内容"></el-input>
					<span style="margin-left: 5px;margin-right: 20px;">分</span>
					及格分数：<el-input v-model="testScore" style="width:200px;" size="mini" placeholder="请输入内容"></el-input>
				</div>-->
			</div>
		</div>	
		
		<!--写一个弹框-->
		<el-dialog
		  :title="test_item.describ"
		  :visible.sync="showTestVisible"
		  width="1000px"
		  :before-close="handleClose">
		  <div class="modal_top">
		  	<el-row>
			  <el-col :span="6">标题:<el-input style="width:60%;margin-left: 5px;" size="mini" v-model="title" placeholder="请输入内容"></el-input></el-col>
			  <!--<el-col :span="6">试题状态： <el-select style="width:60%;margin-left: 5px;" size="mini" v-model="testState" placeholder="请选择">
									    <el-option label="有效" value="1"></el-option>
									    <el-option label="无效" value="-1"></el-option>
									  </el-select>
			  </el-col>-->
			  <el-col :span="6">难度：<el-select style="width:60%;margin-left: 5px;" size="mini" v-model="difficulty" placeholder="请选择">
									    <el-option label="简单" value="简单"></el-option>
									    <el-option label="普通" value="普通"></el-option>
									    <el-option label="困难" value="困难"></el-option>
									  </el-select></el-col>
			  <el-col :span="6">分类：
			  	<el-autocomplete
	      			class="inline-input"
	      			style="width:60%;margin-left: 5px;" size="mini"
			        v-model="pid"
			        :fetch-suggestions="querySearch"
			        placeholder="请添加或选择试题分类"
			        @select="handleSelect"
			    >
			     <template slot-scope="{ item }">
				    <div class="name">{{ item }}</div>
				    <!--<span class="addr">{{ item.address }}</span>-->
				  </template>
			    </el-autocomplete>
			  </el-col>
			  <el-button size="mini" @click="questionSearch(0)" type="primary" icon="el-icon-search">搜索</el-button>
			</el-row>
		  </div>
		  <div class="table">
		  	<el-table
			    ref="multipleTable"
			    :data="allCheckData"
			    tooltip-effect="dark"
			    style="width: 100%"
			    @selection-change="handleSelectionChange">
			    <el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			    <el-table-column
			      label="题型"
			      width="120">
			      <template slot-scope="scope">{{ scope.row.bundle }}</template>
			    </el-table-column>
			    <el-table-column
			      prop="pid"
			      label="分类"
			      width="120">
			    </el-table-column>
			    <el-table-column
			      label="内容"
			      show-overflow-tooltip>
			      <template slot-scope="scope" v-html="scope.row.title"></template>
			    </el-table-column>
			    <el-table-column
			      prop="difficulty"
			      label="难度"
			      show-overflow-tooltip>
			    </el-table-column>
			  </el-table>
		  </div>
		  <el-pagination
			  background
			  style="margin-top: 30px;"
			  :page-size="45"
			  :total="allTotal"
			  @current-change="currentChange"
			>
			</el-pagination>
		  <div slot="footer" style="text-align: center;">
		  	<el-button plain  @click="closeModal">
				关闭
			</el-button>
			<el-button @click="saveModal" type="primary" >
				保存
			</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
    import { questionGetType,questionSearch,Login} from '@/assets/util/api.js'
  export default {
    data() {
      return {
      	question:['A','B',"C","D",'E','F','G','H','I','J','K'],//选择题选项标志
      	checkNum:1,
      	checkPaperVisible:false,
      	questionTypeIn:"",
      	questionType:"",
      	pageName:"",
      	pageItem:{},
      	pageType:"",
      	allList:[],
      	showTestVisible:false,//弹框显示隐藏
      	testState:"",//试题状态
      	difficulty:"",//试题难易程度
      	checkTestClassify:"",
      	test_item:"",//当前添加的试题类型，随时更新
      	test_idx:"",//当前试题类型所在idx
      	allCheckData: [],
        bundle:"",
        pid:"",
        title:"",
        totalCount:"",//总的页面结构
        allTotal:"", //总的分页数据
        check_list:"",//选中时的切换列表
        allTopicCount:0,//总题目数量
        allTopicValue:0,//总题目分值
        testTime:"",
        testScore:""
      };
    },
    watch:{
    	allList:{
    		handler:function(newValue,oldValue){
//  			console.log(newValue)
    		},
    	}
    },
    mounted(){
      this.questionType = this.inStorage("get","questionType");
	  this.access_token = this.inStorage("get","access_token");
      if(this.$route.query.step){
      	this.getPageData();
      }else if(this.$route.query.state == "edition"){
      	this.getEditionData();
      }
    },
    filters:{
    	getMultiChoiceAnswer(val){
    		var  _this = this;
    		let allStr = ['A','B',"C","D",'E','F','G','H','I','J','K'];
    		let str = []
    		let vallen = val.length;
    		for(let i=0;i<val.length;i++){
    			if(val[i] == 'true'){
    				str.push(allStr[i]);
    			}
    		}
    		val = str.join(",");
    		return val;
    	}
    },
    methods: {
    	getPageData(){
	        let pageItem = this.inStorage("get","pageItem");
	        this.pageName = pageItem.pageName;
	        this.pageItem = pageItem;
	        this.pageType = pageItem.pageType;
	        if(this.inStorage("get","allList")){
		      	this.allList = this.inStorage("get","allList");
		      	this.getAlldata();
		    }
    	},
    	getEditionData(){
    		let pageEditor = this.inStorage("get","pageEditor");
    		this.pageName = pageEditor.name;
    		this.pageType = pageEditor.bundle;
    		let pageMap = new Map();
    		pageEditor.questions.forEach((str,idx)=>{
    			if(pageMap.has(str.bundle_t)){
    				pageMap.get(str.bundle_t).push(str);
    			}else{
    				pageMap.set(str.bundle_t,[])
    				pageMap.get(str.bundle_t).push(str);
    			}
    		})
    		let type = this.inStorage("get","questionType");
    		type.forEach((str,idx,arr)=>{
    			if(pageMap.has(str.type)){
    				let li = {"describ":str.describ,'type':str.type,'score':0,"list":pageMap.get(str.type)};
    				this.allList.push(li);
    			}
    		})
    		this.getAlldata();
    	},
    	getAlldata(val){
    		var _this = this;
    		_this.allTopicValue = 0;
    		_this.allTopicCount = 0;
    		this.allList.forEach(function(str,idx,arr){
		    	_this.allTopicCount += str.list.length;
		    	if(val==1){
		    		str.list.forEach((listr,liidx,liarr)=>{
		    			listr.full_score = str.score;
		    		})
		    	}
		    	
		    	str.list.forEach((listr,liidx,liarr)=>{
		    		if(!!listr.full_score){
		    			_this.allTopicValue+=parseInt(listr.full_score);
		    		}
		    	})
		    })
    	},
     checkItem(idx){
     	this.checkNum = idx;
     },
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
		var _this = this;
        var params = {
        	access_token:this.access_token
        }
        var arr = [];
        questionGetType(this,params).then((res)=>{
        	arr = res.data.data;
        	var result = queryString ? arr.filter(_this.createFilter(queryString)) : arr;
        	cb(result);
        })
      },
      handleSelect(item) {
        this.checkTestClassify = item;
      },
        checkPaper(){
        	this.checkPaperVisible = true;
        },
        handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	    },
	    //获取试题类型以及描述
       	questionTypeCheck(e){
			e = JSON.parse(e);
			e.name = e.describ;
			e.score= 0;
			e.list= [];
	       	this.allList.push(e);
	    },
	    removeAllListItem(index){
	    	this.allList.splice(index,1);
	    },
	    checkItemTest(item,index){
	    	this.test_item = item;
	    	this.bundle = this.test_item.describ;
	    	this.test_idx = index;
	    	this.questionSearch(0)
	    },
	    //试题搜索
	    questionSearch(pageNum){
     	var _this = this;
     	var topic =  this.inStorage("get","topic");
     	var params = {
     		access_token:this.access_token,
     		page_num:pageNum,
     		topic:topic,
     		bundle:this.bundle,
     		pid:this.pid,
     		title:this.title,
     		content:"",
     		difficulty:this.difficulty,
     	}
     	questionSearch(this,params).then((res)=>{
	     		if(res.data.state==true){
	     			_this.showTestVisible = true;
			      	_this.allCheckData = res.data.data.current_data;
			      	_this.allTotal = res.data.data.total_count;
	     		}
     		});
     },
     //分页页面条目变化
     currentChange(idx){
     	this.questionSearch(idx);
     },
     //关闭模态框
     closeModal(){
     	this.pid = "";
     	this.bundle = "";
     	this.title = "";
     	this.difficulty = "";
     	this.showTestVisible = false;
     },
     //选中切换
     handleSelectionChange(item){
     	this.check_list = item;
     },
     //保存模态框
     saveModal(){
     	let list = this.allList[this.test_idx].list.concat(this.check_list);
     	list.forEach((str,idx,arr)=>{
     		if(!!this.allList[this.test_idx].full_score){
     			str.score =parseInt(this.allList[this.test_idx].full_score)
     		}else{
     			str.score = 0;
     		}
     	})
     	this.allList[this.test_idx].list = list;
     	this.getAlldata();
     	this.closeModal();
     	
     },
     //删除当前index数据
     deleteListItem(idx,listidx){
     	this.allList[idx].list.splice(listidx,1);
     },
     //子列表前后移动
     listnext(idx,listidx){
     	if(listidx<this.allList[idx].list.length){
     		let listarr = this.allList[idx].list.splice(listidx+1,1);
     		this.allList[idx].list.splice(listidx,0,listarr[0])
     	}
     },
     listprev(idx,listidx){
     	if(listidx!=0){
     		let listarr = this.allList[idx].list.splice(listidx-1,1);
     		this.allList[idx].list.splice(listidx,0,listarr[0]);
     	}
     },
     //列表前后移动
     allPrev(index){
     	if(index>0){
     		let listarr = this.allList.splice(index-1,1);
     		this.allList.splice(index,0,listarr[0]);
     	}
     },
     //列表前后移动
     allNext(index){
     	if(index<this.allList.length-1){
     		let listarr = this.allList.splice(index+1,1);
     		this.allList.splice(index,0,listarr[0]);
     	}
     },
     savePageAndNext(){
     	this.inStorage("set","allList",this.allList);
     	let pageEditor = this.inStorage("get","pageEditor");
     	this.pageItem.pageName = this.pageName;
     	this.pageItem.pageType = this.pageType;
     	this.pageItem.score = this.allTopicValue;
     	this.pageItem.listLen = this.allTopicCount;
     	if(!!pageEditor){
     		this.pageItem.paperNo = pageEditor.paper_no;
     		this.pageItem.inText = pageEditor.attach;
     		this.pageItem.time = pageEditor.limit_time/60;
     	}
     	
     	this.inStorage("set","pageItem",this.pageItem);
     	if(this.$route.query.step){
     		this.RouterTo(this,"/itemBank/addPaper-step3",{step:3})
     	}else{
     		this.RouterTo(this,"/itemBank/addPaper-step3",{state:'edition'})
     	}
     }
    }
  }
 
</script>
<style lang="scss" scoped>
body{
	font-family: 'MicrosoftYaHei','微软雅黑','Helvetica Neue','Hiragino Sans GB','WenQuanYi Micro Hei',sans-serif;
    color: #666;
}
.animate{
	transition-timing-function: ease-in-out;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.step-3{
	overflow: auto;
	color: #666;
	font-size: 14px;
	padding:40px 0 0 55px;
	position: relative;
	.next{
		position: absolute;
		right: 5px;
		top: 5px;
	}
	.left{
		width: 20%;
		float: left;
		.total{
			width: 100%;
		    border: 1px solid #DEDEDE;
		    border-radius: 4px;
		    float: left;
		    padding: 16px 14px;
		    box-sizing: border-box;
		    p{
		    	color: #666;
		    	font-size: 14px;
		    }
		}
		.group_simple{
			font-size: 14px;
		    color: #333333;
		    margin-bottom: 9px;
		    padding: 16px 14px;
		   	box-sizing: border-box;
		   	border: 1px solid #DEDEDE;
    		border-radius: 4px;
    		p{
    			margin-top: 0;
    			margin-bottom: 10px;
    			overflow: hidden;
    			span{
    				margin: 0 5px;
    				color: #1A8CFE;
    			}
    			i{
    				float: right;
    				cursor: pointer;
    			}
    		}
		}
		.group_simple:hover{
			border: 1px solid #1A8CFE;
		    box-shadow: 0 0 10px 0 rgba(47,124,219,0.30);
		    border-radius: 4px;
		}
	}
	.right{
		width: 75%;
		float: right;
		.questions-board{
			width: 100%;
			h3{
				border-bottom: 1px solid #DEDEDE;
			    padding-bottom: 30px;
			    margin: 0;
			    color: #333333;
			}
			input{
				width: 100%;
				border: none;
				text-align: center;
				outline: none;
				font-size: 18px;
			}
			.empty{
				text-align: center;
			    color: #999999;
			    margin: 64px 0 20px 0;
			}
			.ipt_questions_box{
				/*margin-top: 135px;*/
				border-bottom: 1px solid #DEDEDE;
    			padding-bottom: 62px;
    			text-align: center;
			}
		}
	}
}
.group_title{
	margin: 30px 0 18px 0;
}
.extract-box-tit{
	margin-top: 10px;
}
.extract-box-btnDiv{
	margin: 10px 0;
}
.buttonLeft{
	margin-top: 135px;
}
.questions{
	background: #F6F7FA;
    border-radius: 4px;
    margin-bottom: 21px;
    padding: 12px 0 12px 22px;
    position: relative;
    min-height: 230px;
    font-size: 12px;
    color: #666666;
    text-align: left;
    .choice_list{
    	max-width: 60%;
    	dl dd{
    		margin-bottom: 10px;
    	}
    	strong{
    		margin-right: 5px;
    	}
    	.correctAnswer{
    		color: #1A8CFE;
    	}
    	/*overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;*/
		.answer{
			margin-left: 40px;
		}
		.analysis{
			margin-left: 40px;
		}
    }
    .edition_in{
    	width: 100px;
    	position: absolute;
    	right: 20px;
    	top: 0;
    }
}
.modal_top{
	overflow: hidden;
	padding-bottom:20px;
	border-bottom:3px solid #EBEEF5;
	margin-bottom: 10px;
}
</style>

